<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="css/init.css">
        <!-- <link rel="stylesheet" href="css/element-ui.css"> -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        
    </head>
    <body>
        <div id="app">
        </div>       
    </body>
    <!-- <script src="js/element.js"></script> -->
    <!-- <script type="text/javascript" src="js/vue.min.js"></script> -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/request.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:function(){
                return{
                    formInline: {
                        infor:''
                    },
                    totalcount:1,
                    pagesize:10,
                    tableData: [],
                    page:1,
                    dialogVisible:false,
                    dialogform:{}
                }
            },
            template:`<div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline div-flex">
                    <div>
                        <el-form-item label="搜索">
                            <el-input v-model="formInline.infor" placeholder="请输入订单号搜索" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </div>
                    <!--<div>
                        <el-form-item>
                            <el-button type="primary" @click="toMylink">我的支付链接</el-button>
                        </el-form-item>
                    </div>-->
                </el-form>
                <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                    <el-table-column
                    prop="order_id"
                    label="id"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    label="支付方式"
                    width="180">
                    <template slot-scope="scope">
                        {{scope.row.type=='wx'?'微信':'支付宝'}}
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="order_no"
                    label="订单号">
                    </el-table-column>
                    <el-table-column
                    label="金额">
                        <template slot-scope="scope">
                            {{scope.row.money/100}}
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="pay_status"
                    label="支付状态">
                        <template slot-scope="scope">
                            <span :style="{'color':scope.row.pay_status==='yes'?'green':'red'}">{{scope.row.pay_status==='yes'?'已支付':'未支付'}}</span>
                            
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="pay_time"
                    label="支付时间">
                    </el-table-column>
                    <el-table-column
                    prop="create_time"
                    label="创建时间">
                    </el-table-column>
                </el-table>
                <el-pagination background :page-size="pagesize" layout="total, prev, pager, next" :total="totalcount" @current-change="changePage" class="page"></el-pagination>
             </div>`,

            methods:{
                onSubmit() {
                    this.getList();
                },
                getList(){
                    let params = {
                        order_no:this.formInline.infor,  
                        page:this.page,
                        page_nums:this.pagesize, 
                    };
                                         
                    request.post('/admin/order/lists', params).then((res) =>{
                        console.log(res);
                        if(res.code === 2000) {
                            this.tableData = res.data.list;
                            this.totalcount = res.data.count;
                        }else{
                            console.log('错误')
                        }
                    }).catch((err) => {
                        console.log(err);
                    })
                },
                changePage(e){
                    this.page=e;
                    this.getList();
                },
                toMylink(){
                    window.location.href = 'my.html'
                }
            },

            created (){
                this.getList()
            },

        });
    </script>
    <style>
        .page{float:right;margin-top:5px;}
        .div-flex{
            display: flex;
            justify-content: space-between;
            margin-top:10px;
        }
    </style>
</html>